import { setGoodsCount } from '@/api/cart'

export default {
  // 开启命名空间
  namespaced: true,
  state: {
    // 购物车的商品列表
    goods: []
  },
  getters: {
    totalCount: state => state.goods.reduce((sum, v) => sum + v.count, 0),
    totalPrice (state) {
      return state.goods.reduce((sum, v) => sum + v.price * v.count, 0)
    }
  },
  mutations: {
    test1 () {
      console.log('cart - test1')
    },

    // 当参数比较多的时候，用对象形式，语义化好，严谨
    // 当参数比较少的时候，用数组形式，代码简洁
    setGoodsCount (state, [id, step]) {
      // 要知道改哪一个商品   id
      // 要知道加还是减       step
      const goods = state.goods.find(v => v.id === id)
      goods.count += step
    },
    setGoods (state, newGoods) {
      state.goods = newGoods
    }
  },
  actions: {
    async setGoodsCount (context, [id, step]) {
      const goods = context.state.goods.find(v => v.id === id)
      // 如果 step 小于 0，并且 this.goods.count <= 1
      if (step < 0 && goods.count <= 1) return

      await setGoodsCount(id, goods.count + step)

      // context 就是当前模块的 Store 实例，所以在调用自己的时候，不用加模块前缀
      context.commit('setGoodsCount', [id, step])

      // 访问本模块的 mutation => context.commit('mutation名称')
      // 访问本模块的 action => context.dispatch('action名称')
      // 访问笨模块的 getter => context.getters.getter名称

      // ========================================================

      // 思考：有没有可能需要在一个 子模块 中 访问 根模块 或者 其他子模块 的 mutations、actions、getters？
      // context.commit('test1') 只会调用到自己的

      // mutation、action、getter 函数中的 this 都指向根模块的仓库实例（根Store实例）
      // 访问根模块的 mutation => this.commit('mutation名称')
      // 访问根模块的 action => this.dispatch('action名称')
      // 访问根模块的 getter => this.getters.getter名称

      // 访问其他子模块的 mutation => this.commit('子模块名称/mutation名称')
      // 访问其他子模块的 action => this.dispatch('子模块名称/action名称')
      // 访问其他子模块的 getter => this.getters['子模块名称/getter名称']
    }
  }
}
